<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FitPeak - 健身社区</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
<!-- 其他页面也替换为 5.x 版本 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 配置Tailwind自定义颜色和字体 --><!--inter 字体专为屏幕设计，在不同设备（手机、电脑）和分辨率下表现稳定。-->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            dark: '#1F2937',
            light: '#F9FAFB'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <!-- 自定义工具类 --><!--33行能见度渲染 只渲染窗口范围内可见的，看不见的一律不管，降低渲染开销 38行添加动画效果弹出 41 42行为输入框添加的效果focus意思为当输入框为焦点时，也就是被点击后的状态
   首先是边框会变成主题色，会向外添加2px的外边框，且外边框的颜色为主题色的20%透明度，还有清除浏览器默认输入框的焦点样式focus:outline-none，目的是为了不与自定义样式发生冲突 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .input-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
    }
  </style>
  <style>
    /* 全局样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;/*定义的字体，先是加载inter字体，若是没有则加载后两种的一个，就是有哪个加载哪个*/
      scroll-behavior: smooth;/*定义滚动效果，平滑滚动*/
    }
    
    /* 动画效果 */
    /*滑入动画*/
    .slide-in {/*将slidein的效果应用到动画元素中并且配置为动画时长为半秒 ease为缓动函数，先慢后快再慢，平滑过渡，
      也是因为这一步操作使得动画效果不是直接瞬间显现而是缓慢过渡*/
      animation: slideIn 0.5s ease forwards;
    }
    
    @keyframes slideIn {
      from {
        transform: translateY(20px);
        opacity: 0;
      }/*动画开始状态向下移动20px，并且变为完全透明opacity:0*/
      to {
        transform: translateY(0);
        opacity: 1;
      }/*动画结束状态，元素回到原位置，且变为完全显示*/
    }
    
    /*淡入动画*/
    .fade-in {
      animation: fadeIn 0.5s ease forwards;/*将fadein的效果应用到动画元素中并且配置为动画时长为半秒 ease为缓动函数，先慢后快再慢，平滑过渡，
      也是因为这一步操作使得动画效果不是直接瞬间显现而是缓慢过渡*/
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }/*开始状态*/
      to {
        opacity: 1;
      }/*结束状态*/
    }
    
    /* 背景图案 */
    .bg-pattern {
      background-image: radial-gradient(#165DFF10 1px, transparent 1px);
      background-size: 20px 20px;
    }
  </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen">
  <div class="flex flex-col md:flex-row min-h-screen">
    <!-- 左侧图片区域 -->
    <div class="hidden md:flex md:w-1/2 bg-primary relative overflow-hidden"><!--hidden先隐藏所有元素，而后根据md断电前缀的判断，若是屏幕宽度width>=768px
      则会覆盖前面的hidden效果，-->
      <div class="absolute inset-0 bg-pattern opacity-30"></div>
      <div class="relative z-10 flex flex-col justify-center items-center text-white p-12 w-full">
        <div class="text-5xl font-bold mb-6 text-shadow slide-in" style="animation-delay: 0.1s">FitPeak</div>
        <div class="text-xl mb-8 text-center slide-in" style="animation-delay: 0.2s">突破自我，成就更好的自己</div>
        <div class="w-full max-w-md rounded-xl overflow-hidden shadow-2xl slide-in" style="animation-delay: 0.3s">
          <img src="https://picsum.photos/id/684/800/600" alt="健身展示" class="w-full h-auto object-cover">
        </div>
        <div class="mt-12 grid grid-cols-3 gap-6 w-full max-w-md slide-in" style="animation-delay: 0.4s">
          <div class="text-center p-4 rounded-lg bg-white/10 backdrop-blur-sm">
            <i class="fa fa-dumbbell text-3xl mb-2"></i>
            <div>专业器材</div>
          </div>
          <div class="text-center p-4 rounded-lg bg-white/10 backdrop-blur-sm">
            <i class="fa fa-users text-3xl mb-2"></i>
            <div>社区支持</div>
          </div>
          <div class="text-center p-4 rounded-lg bg-white/10 backdrop-blur-sm">
            <i class="fas fa-chart-line text-3xl mb-2"></i>
            <div>数据追踪</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧表单区域  w-full：默认情况下（屏幕宽度 <768px 时），容器宽度占父元素的 100%（全屏宽度）。
md:w-1/2：当屏幕宽度 ≥768px（md 断点）时，容器宽度变为父元素的 50%（占一半宽度）。 -->
    <div class="w-full md:w-1/2 flex items-center justify-center p-6 md:p-12">
      <div class="w-full max-w-md">
        <!-- 移动端Logo -->
        <div class="md:hidden text-center mb-8">
          <div class="text-4xl font-bold text-primary">FitPeak</div>
          <div class="text-gray-500 mt-1">突破自我，成就更好的自己</div>
        </div>
        
        <!-- 表单切换标题 -->
        <div class="mb-8 text-center">
          <h2 id="form-title" class="text-[clamp(1.5rem,3vw,2rem)] font-bold">注册账号</h2>
          <p id="form-subtitle" class="text-gray-500 mt-2">加入我们，开启健身之旅</p>
        </div>
        
        <!-- 切换按钮 -->
        <div class="flex rounded-lg overflow-hidden mb-8 border border-gray-200">
          <button id="register-tab" class="flex-1 py-3 px-4 bg-primary text-white font-medium transition-custom">
            注册
          </button>
          <button id="login-tab" class="flex-1 py-3 px-4 bg-white text-gray-600 font-medium transition-custom">
            登录
          </button>
          
        </div>
        
        <!-- 注册表单 -->
        <form id="register-form" class="space-y-5" action="register.php" method="post">
          <div class="grid grid-cols-1 gap-5">
            <div>
              <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                  <i class="fa fa-user"></i>
                </span>
                <input type="text" id="register-name" name="register-name" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-custom" placeholder="请输入您的姓名" required>
              </div>
            </div>
            
            <div>
              <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                  <i class="fa fa-envelope"></i>
                </span>
                <input type="email" id="register-email" name="register-email" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-custom" placeholder="请输入您的邮箱" required>
              </div>
            </div>
            
            <div>
              <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                  <i class="fa fa-lock"></i>
                </span>
                <input type="password" id="register-password" name="register-password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus transition-custom" placeholder="请设置密码（至少8位）" minlength="8" required>
                <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom" data-target="register-password">
                  <i class="fa fa-eye-slash"></i>
                </button>
              </div>
            </div>
            
            <div>
              <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                  <i class="fa fa-phone-alt"></i>
                </span>
                <input type="tel" id="register-phone" name="register-phone" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-custom" placeholder="请输入您的手机号码" required>
              </div>
            </div>
            
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="terms" type="checkbox" class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary" required>
              </div>
              <div class="ml-3 text-sm">
                <label for="terms" class="text-gray-600">我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a></label>
              </div>
            </div>
          </div>
          
          <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center group">
            <span>创建账号</span>
            <i class="fa fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i>
          </button>
          
          <div class="relative flex items-center justify-center">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-200"></div>
            </div>
            <div class="relative z-10 px-4 bg-gray-50 text-sm text-gray-500">
              或使用以下方式注册
            </div>
          </div>
          
          <div class="grid grid-cols-3 gap-4">
            <!-- 微信图标 -->
            <button type="button" class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
              <i class="fab fa-weixin text-green-500 text-xl"></i> 
            </button>
            <!-- QQ图标 -->
            <button type="button" class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
              <i class="fab fa-qq text-blue-500 text-xl"></i>
            </button>
            <!-- 谷歌图标 -->
            <button type="button" class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
              <i class="fab fa-google text-red-500 text-xl"></i>
            </button>
          </div>
          <!-- 跳转至管理员登陆页面 -->
           <div class="mt-6 text-center">
            <a href="admin.html" class="text-sm text-gray-600 hover:text-primary transition-colors">
           <i class="fa fa-shield-alt mr-1"></i>管理员登录入口
             </a>
           </div>
        </form>
        
        <!-- 登录表单 (默认隐藏) -->
        <form id="login-form" class="space-y-5 hidden" action="login.php" method="post">
          <div class="space-y-5"><!-- 外层容器，控制内部元素的垂直间距 -->
            <div>
              <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                  <i class="fa fa-envelope"></i>
                </span>
                <input type="email" id="login-email" name="login-email" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-custom" placeholder="请输入您的邮箱" required>
              </div>
            </div>
            
            <div>
              <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                  <i class="fa fa-lock"></i>
                </span>
                <input type="password" id="login-password" name="login-password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus transition-custom" placeholder="请输入您的密码" required>
                <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom" data-target="login-password">
                  <i class="fa fa-eye-slash"></i>
                </button>
              </div>
            </div>
            
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <input id="remember-me" type="checkbox" class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary">
                <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
              </div>
              <a href="#" class="text-sm text-primary hover:underline">忘记密码？</a>
            </div>
          </div>
          
          <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center group">
            <span>登录</span>
            <i class="fa fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i>
          </button>
          
          <div class="relative flex items-center justify-center">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-200"></div>
            </div>
            <div class="relative z-10 px-4 bg-gray-50 text-sm text-gray-500">
              或使用以下方式登录
            </div>
          </div>
          
          <div class="grid grid-cols-3 gap-4">
            <button type="button" class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
              <i class="fab fa-weixin text-green-500 text-xl"></i>
            </button>
            <button type="button" class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
              <i class="fab fa-qq text-blue-500 text-xl"></i>
            </button>
            <button type="button" class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
              <i class="fab fa-google text-red-500 text-xl"></i>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <script>
    // 表单切换功能
    const registerTab = document.getElementById('register-tab');
    const loginTab = document.getElementById('login-tab');
    const registerForm = document.getElementById('register-form');
    const loginForm = document.getElementById('login-form');
    const formTitle = document.getElementById('form-title');
    const formSubtitle = document.getElementById('form-subtitle');
    
    registerTab.addEventListener('click', () => {
      // 切换标签样式
      registerTab.classList.remove('bg-white', 'text-gray-600');
      registerTab.classList.add('bg-primary', 'text-white');
      loginTab.classList.remove('bg-primary', 'text-white');
      loginTab.classList.add('bg-white', 'text-gray-600');
      
      // 切换表单显示
      registerForm.classList.remove('hidden');
      loginForm.classList.add('hidden');
      
      // 更新标题
      formTitle.textContent = '注册账号';
      formSubtitle.textContent = '加入我们，开启健身之旅';
      
      // 添加动画
      registerForm.classList.add('slide-in');
      setTimeout(() => registerForm.classList.remove('slide-in'), 500);
    });
    
    loginTab.addEventListener('click', () => {
      // 切换标签样式
      loginTab.classList.remove('bg-white', 'text-gray-600');
      loginTab.classList.add('bg-primary', 'text-white');
      registerTab.classList.remove('bg-primary', 'text-white');
      registerTab.classList.add('bg-white', 'text-gray-600');
      
      // 切换表单显示
      loginForm.classList.remove('hidden');
      registerForm.classList.add('hidden');
      
      // 更新标题
      formTitle.textContent = '欢迎回来';
      formSubtitle.textContent = '请登录您的账号';
      
      // 添加动画
      loginForm.classList.add('slide-in');
      setTimeout(() => loginForm.classList.remove('slide-in'), 500);
    });
    
    // 密码显示/隐藏功能
    const toggleButtons = document.querySelectorAll('.toggle-password');
    toggleButtons.forEach(button => {
      button.addEventListener('click', () => {
        const targetId = button.getAttribute('data-target');
        const passwordInput = document.getElementById(targetId);
        const icon = button.querySelector('i');
        
        if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          passwordInput.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
    });
    
    
  </script>
</body>
</html>